$primary-color:#5a98de;
$secondary-color:#3bb4f2;
$success-color:#5eb95e;
$warning-color: #f37b1d;
$danger-color: #dd514c;
$error-color: #c00;

@mixin transition($v) {
  
  transition: $v;
}
@mixin boxShadow($v) {
  box-shadow: $v;
}
@mixin borderRadius($v) {
  -ms-border-radius: &v;
  border-radius: $v;
}

/*3.5 按钮
  name:			  hui-button
  example:		<button class="hui-button radius radius hui-button-primary|hui-button-info|hui-button-success|hui-button-warning|hui-button-danger|hui-button-inverse|hui-button-link" type="button">按钮</button>
  explain:		hui-button-primary：主要|hui-button-info：信息|hui-button-success：成功|hui-button-warning：警告|hui-button-danger：危险|hui-button-inverse：反向|hui-button-link：链接

*/
/*按钮*/
.hui-btn {
  display: inline-block;
  min-width: 32px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  white-space: nowrap;
  vertical-align: middle;
  -moz-padding-start: npx;
  -moz-padding-end: npx;
  border: solid 1px #ddd;
  background-color: #fff;
  width: auto;
  *zoom: 1;
  *overflow: visible;
  @include transition(background-color .1s linear);
  &:active,
  &.active {
    background-color: #ccc;
    @include boxShadow(0 1px 8px rgba(0, 0, 0, 0.125) inset);
  }
  &:first-child {
    *margin-left: 0;
  }
  /*默认——灰色	通常用于取消*/
  &.hui-btn-default {
    background-color: #e6e6e6;
    border-color: #e6e6e6;
    &:hover,
    &:focus,
    &:active,
    &.active {
      color: #333;
      background-color: #c7c7c7;
      border-color: #c7c7c7;
    }
  }
  /*主要——主色	通常用于确定、提交、购买、支付等*/
  &.hui-btn-primary {
    color: #fff;
    background-color: $primary-color;
    border-color: $primary-color;
    &:hover,
    &:focus,
    &:active,
    &.active {
      color: #fff;
      background-color: #0a6999;
      border-color: #0a6999;
    }
  }

  /*次要按钮*/
  &.hui-btn-secondary {
    color: #fff;
    background-color: $secondary-color;
    border-color: $secondary-color;
    &:hover,
    &:focus,
    &:active,
    &.active {
      color: #fff;
      background-color: #0f9ae0;
      border-color: #0f9ae0;
    }
  }

  /*成功*/
  &.hui-btn-success {
    color: #fff;
    background-color: $success-color;
    border-color: $success-color;
    &:hover,
    &:focus,
    &:active,
    &.active {
      color: #fff;
      background-color: #429842;
      border-color: #429842;
    }
  }

  /*警告*/
  &.hui-btn-warning {
    color: #fff;
    background-color: $warning-color;
    border-color: $warning-color;
    &:hover,
    &:focus,
    &:active,
    &.active {
      color: #fff;
      background-color: #c85e0b;
      border-color: #c85e0b
    }
  }

  /*危险*/
  &.hui-btn-danger {
    color: #fff;
    background-color: $danger-color;
    border-color: $danger-color;
    &:hover,
    &:focus,
    &:active,
    &.active {
      color: #fff;
      background-color: #c62b26;
      border-color: #c62b26
    }
  }

  /*链接*/
  &.hui-btn-link {
    color: #0e90d2;
    cursor: pointer;
    border-color: transparent;
    background-color: transparent;
    &:hover,
    &:focus,
    &:active,
    &.active {
      color: #095f8a;
      text-decoration: underline;
      background-color: transparent;
    }
  }

  // 虚线
  &.hui-btn-dashed {
    border-style: dashed;
  }

  /*块级按钮*/
  &.hui-btn-block {
    box-sizing: border-box;
    display: block;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }

  /* Outline buttons */
  &.hui-btn-default-outline {
    background-color: transparent;
    border-color: #e6e6e6;
    &:hover,
    &:focus,
    &:active,
    &.active,
    &.focus {
      color: #333;
      background-color: transparent;
      border-color: #c7c7c7;
    }
  }

  &.hui-btn-primary-outline {
    color: $primary-color;
    background-color: transparent;
    border-color: $primary-color;
    &:hover,
    &:focus,
    &:active,
    &.active,
    &.focus {
      color: #0a6999;
      background-color: transparent;
      border-color: #0a6999;
    }
  }

  &.hui-btn-secondary-outline {
    color: $secondary-color;
    background-color: transparent;
    background-image: none;
    border-color: $secondary-color;
    &:hover,
    &.focus,
    &:active,
    &:focus {
      color: #fff;
      background-color: $secondary-color;
      border-color: $secondary-color
    }
  }

  &.hui-btn-success-outline {
    color: $success-color;
    background-color: transparent;
    background-image: none;
    border-color: $success-color;
    &:hover,
    &:focus,
    &:active,
    &.active,
    &.focus{
      color: #fff;
      background-color: $success-color;
      border-color: $success-color;
    }
  }

  &.hui-btn-warning-outline {
    color: $warning-color;
    background-color: transparent;
    background-image: none;
    border-color: $warning-color;
    &:hover,
    &:focus,
    &:active,
    &.active,
    &.focus {
      color: #fff;
      background-color: $warning-color;
      border-color: $warning-color;
    }
  }

  &.hui-btn-danger-outline {
    color: $danger-color;
    background-color: transparent;
    background-image: none;
    border-color: $danger-color;
    &:hover,
    &:focus,
    &:active,
    &.active,
    &.focus {
      color: #fff;
      background-color: $danger-color;
      border-color: $danger-color;
    }
  }

  /*禁用状态*/
  &.disabled {
    cursor: not-allowed;
    pointer-events: none;
    background-image: none;
    opacity: .65;
    filter: alpha(opacity=65);
    @include boxShadow(none);
  }

  &.hui-btn-loading {
    position: relative;
  }
}

a.hui-btn:hover,
a.hui-btn:focus,
a.hui-btn:active,
a.hui-btn.active,
a.hui-btn.disabled,
a.hui-btn[disabled] {
  text-decoration: none;
}

.open>.hui-btn-primary-outline.hui-dropdown-toggle {
  color: #0a6999;
  background-color: transparent;
  border-color: #0a6999;
}

.open>.hui-btn-secondary-outline.hui-dropdown-toggle {
  color: #fff;
  background-color: $secondary-color;
  border-color: $secondary-color
}

.open > .hui-btn-success-outline.hui-dropdown-toggle {
  color: #fff;
  background-color: $success-color;
  border-color: $success-color;
}

.open > .hui-btn-warning-outline.hui-dropdown-toggle {
  color: #fff;
  background-color: $warning-color;
  border-color: $warning-color;
}

.open>.hui-btn-danger-outline.hui-dropdown-toggle {
  color: #fff;
  background-color: $danger-color;
  border-color: $danger-color;
}

/*表单组*/
.hui-form-group {
  display: inline-block;
  vertical-align: middle;
  .hui-input-text {
    position: relative;
    vertical-align: top;
  }
  .hui-btn {
    position: relative;
    margin-left: -1px;
  }
  &.radius {
    overflow: hidden;
    .hui-input-text {
      @include borderRadius(4px 0 0 4px);
    }
    .hui-btn {
      @include borderRadius(0 4px 4px 0);
    }
  }
  &.round {
    overflow: hidden;
    .hui-input-text {
      @include borderRadius(1000px 0 0 1000px);
    }
    .hui-btn {
      @include borderRadius(0 1000px 1000px 0);
    }
  }
}